<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="template/ui.xhtml">
	<ui:define name="body">
		<h3>Prime Drop Box</h3>

		<p:growl id="growl" showDetail="true" />

		<h:form id="form">
			
			<p:poll interval="3" update="users" />
			
			<p:fieldset id="container" legend="PrimeChat" toggleable="true">

				<h:panelGroup rendered="#{chatController.loggedIn}">

					<h:panelGrid columns="2" columnClasses="publicColumn,usersColumn"
						style="width:100%">
						<p:outputPanel id="public" layout="block"
							styleClass="ui-corner-all ui-widget-content chatlogs" />

						<p:dataList id="users" var="user" value="#{chatUsers.users}"
							styleClass="usersList">
							<f:facet name="header">Users</f:facet>

							<p:commandButton title="Chat" icon="ui-icon-comment"
								oncomplete="pChat.show()"
								update=":form:privateChatContainer">
								<f:setPropertyActionListener value="#{user}"
									target="#{chatController.privateUser}" />
							</p:commandButton>#{user}
							
                		</p:dataList>
					</h:panelGrid>

					<p:separator />

					<p:inputText value="#{chatController.globalMessage}"
						styleClass="messageInput" />
					<p:spacer width="5" />
					<p:commandButton value="Send"
						actionListener="#{chatController.sendGlobal}"
						oncomplete="$('.messageInput').val('').focus()" />
					<p:spacer width="5" />
					<p:commandButton value="Disconnect"
						actionListener="#{chatController.disconnect}" global="false"
						update="container" />
				</h:panelGroup>

				<h:panelGroup rendered="#{not chatController.loggedIn}">
            		Username: <p:inputText value="#{chatController.username}" />

					<p:spacer width="5" />
					<p:commandButton value="Login" actionListener="#{chatController.login}"
						update="container" icon="ui-icon-person" />
				</h:panelGroup>

			</p:fieldset>

			<p:dialog widgetVar="pChat" header="Private Chat" modal="true"
				showEffect="fade" hideEffect="fade">
				<h:panelGrid id="privateChatContainer" columns="2"
					columnClasses="vtop,vtop">
					<p:outputLabel for="pChatInput" value="To: #{chatController.privateUser}" />
					<p:inputTextarea id="pChatInput" value="#{chatController.privateMessage}"
						rows="5" cols="30" />

					<p:spacer />
					<p:commandButton value="Send"
						actionListener="#{chatController.sendPrivate}"
						oncomplete="pChat.hide()" />
				</h:panelGrid>
			</p:dialog>

			<p:commandButton value="Folder" style="margin:0" action="chat"
				ajax="false" />


		</h:form>

		<p:socket onMessage="handleMessage" channel="/chat"
			autoConnect="false" widgetVar="subscriber" />

		<script type="text/javascript">
    function handleMessage(data) {
        var chatContent = $(PrimeFaces.escapeClientId('form:public'));
        chatContent.append(data + '<br />');

        //keep scroll
        chatContent.scrollTop(chatContent.height());
    }
</script>

	</ui:define>
</ui:composition>